<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Provide / Inject</title>
    <!-- 导入 Vue 3 -->
    <script src="https://unpkg.com/vue@next"></script>

    <!-- 导入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />

    <!-- 导入组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
</head>

<body id="app">
    <todo-list></todo-list>
    <todo-list-statistics></todo-list-statistics>
    <p class="text">user:{{this.user}}</p>
</body>
<script>
    const app = Vue.createApp({})

    app.component('todo-list', {
        data() {
            return {
                todos: ['Feed a cat', 'Buy tickets'],
                name: "张三"
            }
        },
        provide() {
            return {
                aaa: () => {
                    this.name;
                }
            }
        },
        template: `
        <div>
        长度： {{ todos.length }}
        {{this.name}}
        </div>
    `
    })

    app.component('todo-list-statistics', {
        inject: ['aaa'],
        created() {
            console.log(this)
            console.log(`Injected property: ${this.aaa}`) // > 注入的 property: John Doe
        },
        mounted() {

            console.log(this)
            console.log(`Injected property: ${this.aaa}`)
        },
        template: `
        Injected property:${this} ${this.aaa}
        `
    })

    app.mount("#app")
</script>

</html>